<template>
  <input
    type="text"
    placeholder="请输入待办事项"
    :value="todoText"
    @input="handlerInput"
  />
</template>

<script>
export default {
  name: "TodoInput",
  props: ["todoText"],
  model: {
    prop: "todoText", // 默认传递的 props 是 value，现在改为 todoText
  },
  methods: {
    handlerInput(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<!-- scoped 局部 css ，当前组件生效，不会影响其他组件 -->
<style lang="scss" scoped>
input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #333;
  outline: none;
  padding: 0 10px;
}
</style>